<template>
  <div class="user-works-wrapper">
    <div class="user-works-title">
      <item-list
        :items="categoriesZh"
        :idx="categoryIdx"
        @changeIdx="changeCategory"
        class="category-list"
      ></item-list>
      <search-bar
        class="user-works-search"
        v-model:searchValue="searchValue"
      ></search-bar>
    </div>

    <source-list
      class="source-list"
      :sources="filteredSources"
      @fetchSourceAbstracts="fetchSourceAbstracts"
    ></source-list>
  </div>
</template>

<script lang="ts" setup>
import SearchBar from '@c/utils/SearchBar.vue'
import SourceList from '@/components/SourceList.vue'
import ItemList from '@c/utils/ItemList.vue'
import { ref, computed, watch } from 'vue'
import { UserStateLogin, useUserStore } from '@/store/user'
import { useRoute, useRouter } from 'vue-router'

const categories = ['history', 'works', 'collection']
const categoriesZh = ['浏览历史', '作品', '收藏']
const searching = ref(false)
const searchValue = ref('')

const userStore = useUserStore()
const userState = userStore.$state as UserStateLogin
const works = computed(() => {
  return userState.work.source
})
const history = computed(() => {
  return userState.history.source
})

const collection = computed(() => {
  return userState.collection.source
})

const route = useRoute()
const categoryIdx = computed(() => {
  return categories.includes(route.query.q as string)
    ? categories.indexOf(route.query.q as string)
    : 0
})

const sources = computed(() => {
  if (categoryIdx.value === 0) {
    return history.value
  } else if (categoryIdx.value === 1) {
    return works.value
  } else {
    return collection.value
  }
})

const filteredSources = computed(() => {
  return sources.value.filter((source) => {
    if (typeof source.title !== 'string') return true
    return (
      source.title.includes(searchValue.value) ||
      source.digest.includes(searchValue.value)
    )
  })
})

const router = useRouter()
function changeCategory(idx: number) {
  router.push({
    path: route.path,
    query: {
      q: categories[idx],
    },
  })
}

watch(categoryIdx, () => {
  fetchSourceAbstracts()
})

function fetchSourceAbstracts() {
  switch (categoryIdx.value) {
    case 0:
      userStore.fetchHistorySourceAbstracts()
      break
    case 1:
      userStore.fetchWorksSourceAbstracts()
      break
    case 2:
      userStore.fetchCollectionSourceAbstracts()
      break
  }
}
</script>

<style scoped lang="scss">
$w: var(--innerWidthPart1);
$th: calc(var(--innerWidthPart1) * 0.065);

.user-works-wrapper {
  width: $w;

  .user-works-title {
    position: relative;
    box-sizing: border-box;
    width: $w;
    height: $th;
    padding: 0 calc($w / 50);
    border-bottom: 1px solid var(--gray);

    .category-list {
      float: left;
      --itemListWidth: calc($w * 0.6);
      --itemListHeight: calc($th);
    }

    .user-works-search {
      float: right;
      --searchBarWidth: calc($w * 0.2);
      --searchBarHeight: $th;
      --searchBarFontSize: calc($th / 4);
      --searchBarInnerHeight: calc($th * 0.6);
      --backgroundColor: white;

      &:focus-within {
        --searchBarWidth: calc($w * 0.35);
      }
    }
  }

  .source-list {
    --sourceListWidth: $w;
  }
}
</style>
